<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>课程管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/template.css}" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" >
            <h1>课程名：[[${book_name}]]</h1>
            <input type="hidden" id="book_name" name="book_name" th:value="${book_name}">
            <input type="hidden" id="topic" name="topic" value="">
            <table id="studentInfoList" lay-filter="studentInfo">

            </table>

            <div id="TeacherTableBar" style="display: none;">
<!--                <a th:lay-href="@{/back/book/edit(book_name=${book_name},menu_topic=${}" class="layui-btn layui-btn-xs layui-btn-normal">编辑学习内容</a>-->
                <a  class="layui-btn layui-btn-xs layui-btn-normal editBook" lay-event="edit">编辑学习内容</a>
            </div>

            <script type="text/html" id="table-content-list">
                <a class="layui-btn layui-btn-normal layui-btn-xs editBook" lay-event="edit"><i
                        class="layui-icon layui-icon-edit"></i>编辑学习内容</a>
            </script>

        </div>
    </div>
</div>

<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'contlist', 'table', 'laypage', 'upload', 'layer', 'laydate', 'jquery', 'form'], function () {
        var $ = layui.$
            , table = layui.table
            // , form = layui.form
            // , upload = layui.upload
            // , layer = layui.layer;

        var laypage = layui.laypage;

        //方法级渲染
        table.render({
            elem: '#studentInfoList'
            , id: 'studentInfoList'
            , url: '/back/book/getBookMenu?book_name='+$("#book_name").val()
            , title: '课程内容表'
            , cellMinWidth: 200
            , page: true
            , limit: 50
            , height: 'full-221'
            , cols: [
                [
                    {checkbox: true, fixed: true}
                    , {type: 'id', field: 'topic', title: '章节', width: 300, fixed: 'left', align: "center"}
                    , { field: 'hasContent', title: '是否已有学习内容', width: 400, fixed: 'left', align: "center"}
                    , {title: '操作', toolbar: '#table-content-list', width: 400, align: 'center'}
                ]
            ]
            , parseData: function (res) {
                return {
                    "code": 0,
                    "msg": res.msg,
                    "data": res.payload.content, //返回值 json 的key
                    "count": res.payload.total
                }
            }
        });



        // 修改和删除等操作
        //监听行工具事件
        table.on('tool(studentInfo)', function (obj) {
            const data = obj.data;
            const topic = data.topic
            const book_name=document.getElementById("book_name").value

           if (obj.event === 'edit') {
               document.getElementById("topic").setAttribute('value', topic)
               var edita = document.getElementsByClassName("editBook")
               for (let i = 0; i < edita.length; i++) {
                   edita.item(i).setAttribute("lay-href", '/back/book/edit?book_name='+book_name+"&menu_topic="+topic)
               }
               // alert("查看课程内容");
           }
        })

        //判断浏览器大小方法
        function screen() {
            //获取当前窗口的宽度
            var width = $(window).width();
            if (width > 768) {
                return 1;   //小屏幕
            } else {
                return 0;   //超小屏幕
            }
        }

        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</body>
</html>
